<template>
  <div id="product">
    <div class="title">作战指挥室</div>
    <div class="column-one">
        <ProduceChart/>
        <MonthPlan/>
    </div>
    <div class="column-two">
      <MapChart/>
      <QualityChart/>
    </div>
    <div class="column-three">
      <CarSaleChart/>
      <ComplainTable/>
    </div>
    <div class="column-four">
      <MajorChart/>
      <g6Chart/>
    </div>
  </div>
</template>

<script setup>
import { onMounted, onUnmounted } from "vue";
import { setScale } from "@/utils";
import ProduceChart from "@/components/screenPage/product/chartComponent/produceChart.vue";
import MonthPlan from "@/components/screenPage/product/chartComponent/monthPlan.vue";
import MapChart from "@/components/screenPage/product/chartComponent/mapChart.vue";
import QualityChart from "@/components/screenPage/product/chartComponent/qualityChart.vue";
import CarSaleChart from "@/components/screenPage/product/chartComponent/carSaleChart.vue";
import ComplainTable from "@/components/screenPage/product/chartComponent/complainTable.vue";
import MajorChart from "@/components/screenPage/product/chartComponent/majorChart.vue";
import g6Chart from "@/components/screenPage/product/chartComponent/g6Chart.vue";


onMounted(() => {
  let product = document.getElementById("product");
  setScale(product);
  window.addEventListener('resize', () => {
    setScale(product);
  })
});

onUnmounted(() => {
  window.removeEventListener('resize')
})
</script>

<style lang="less" scoped>
#product {
    width: 4352px;
    height: 1536px;
    background: url('@/assets/image/product/backf.jpg');
    background-size: 100% 100%;
    transform-origin: 0 0;
    position: fixed;
    left: 50%;
    top: 50%;
    padding: 24px 66px;
    display: flex;
    justify-content: space-between;
    .title{
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: 20px;
        font-size: 48px;
        color: red;
        font-weight: 800;
    }
    .column-one, .column-four, .column-two, .column-three{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .column-two, .column-three{
        width: 1036px;
    }
    .column-one, .column-four{
        width: 1005px;
    }
}
</style>
